<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="device=device-width">
    <title>doc</title>
</head>
<style>
    body, p, h1, h2, h3, h4, h5, ul, li, dl, dt, dd {
	padding:0px;
	margin:0px;
}
body {
	font-size:12px;
	font-family:Verdana,"宋体";
	line-height:25px;
}
ul, li {
	list-style:none;
}
img {
	border:0px;
}
a {
	text-decoration:none;
	color:#7B7B7B;
}
a:hover {
	text-decoration:underline;
	color:#7B7B7B;
}
#container {
	margin:0px auto;
	width:960px;
}
#header {
	height:55px;
}
#header .logo {
	float:left;
	padding-top:5px;
}
#header ul {
	float:right;
	border:1px #c8ece3 solid;
	border-bottom:0px;
	background:#eafffa;
	height:29px;
	margin-top:25px;
	position:relative;
}
#header ul li {
	float:left;
	padding:0px 10px;
	line-height:29px;
}
#header ul .tip {
	position:absolute;
	left:0px;
	top:-15px;
}
#menu {
	clear:both;
	height:36px;
	overflow:hidden;
	background:url(../image/menuBg.jpg) repeat-x;
}
#menu a {
	display:block;
	float:left;
	height:36px;
	line-height:36px;
	color:#FFF;
	padding:0px 16px;
}
#bookTop {
	border:2px #cce9ac solid;
	width:956px;
	position:relative;
	padding-top:90px;
}
.title {
	position:absolute;
	left:-12px;
	top:15px;
	z-index:10;
}
#bookTop a {
	color:#1a66b3;
	font-size:14px;
}
#bookTop strong {
	color:#8E112B;
}
#bookTop span{color:#5ea593; padding-left:10px;}
.bookLeft {
	float:left;
	width:560px;
}
.bookLeft dt {
	float:left;
	width:260px;
	text-align:center;
	position:relative;
}
.bookLeft dt .first {
	position:absolute;
	top:-5px;
	left:20px;
}
.bookLeft dd {
	float:left;
	width:280px;
	padding-top:15px;
}
.bookRight {
	float:left;
	width:390px;
}
.bookRight dl{clear:both;}
.bookRight dt{float:left; width:100px; position:relative;}
.bookRight dt div{position:absolute; top:-10px; left:0px;}
.bookRight dd{float:left; width:285px;}

#footer {
	color:#848484;
	text-align:center;
	clear:both;
}
#footer img {
	vertical-align:middle;
}
.clear10 {
	clear:both;
	height:10px;
	overflow:hidden;
}

</style>
<body>
    <a href="xq.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="index.html">作业三</a>
    <a href="string.html">作业四</a>
    <a href="temp.html">作业五</a>
<div id="container">
    <div id="header">
        <div class="logo"><img src="image/logo.jpg" alt="logo"/></div>
        <ul>
            <li><a href="#">尾品汇</a></li>
            <li><a href="#">当当优品</a></li>
            <li><a href="#">数字馆</a></li>
            <li><a href="#">都看阅器</a></li>
            <li class="tip"><img src="image/icon_count.png" alt="tip"/></li>
        </ul>
    </div>
    <div id="menu">
        <a href="#">首页</a>
        <a href="#">图书</a>
        <a href="#">音像</a>
        <a href="#">童装</a>
        <a href="#">服装</a>
        <a href="#">鞋靴</a>
        <a href="#">运动</a>
        <a href="#">箱包</a>
        <a href="#">美妆</a>
        <a href="#">珠宝</a>
        <a href="#">家居</a>
        <a href="#">食品</a>
        <a href="#">酒</a>
        <a href="#">手机</a>
        <a href="#">数码</a>
        <a href="#">电脑</a>
        <a href="#">家电</a>
    </div>
    <div class="clear10"></div>
    <div><img src="image/banner.png" alt="当当图书榜"/></div>
    <div class="clear10"></div>
    <div id="bookTop">
        <div class="title"><img src="image/bg_bang.gif" alt="title"/></div>
        <div class="bookLeft">
            <dl>
                <dt>
                    <img src="image/book-01.jpg" alt="偷影子的人"/>
                <div class="first">
                    <img src="image/bookNo1.gif" alt="No1"/>
                </div>
                </dt>
                <dd><a href="#">偷影子的人</a>

                    <p>作 者：[法] 马克・李维（Marc Levy）著,段韵灵 译</p>

                    <p>出版社：湖南文艺出版社</p>

                    <p>当当价：<strong>￥ 17.90</strong></p>

                    <p>
                        不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                        一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p></dd>
            </dl>
        </div>
        <div class="bookRight">
            <dl>
                <dt><img src="image/book-02.jpg" alt="看见"/>
                <div class="second"><img src="image/bookNo2.gif" alt="NO2"/></div>
                </dt>
                <dd><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>

                    <p>作 者：柴静 著</p>

                    <p>出版社：广西师范大学出版社</p>

                    <p><strong>￥ 29.40</strong> <span>7.4折</span></p></dd>
            </dl>
            <dl>
                <dt><img src="image/book-03.jpg" alt="改变孩子先改变自己"/>
                <div class="third"><img src="image/bookNo3.gif" alt="NO3"/></div>
                </dt>
                <dd><a href="#">改变孩子先改变自己</a>

                    <p>作 者：贾容韬 贾毅 著</p>

                    <p>出版社：作家出版社</p>

                    <p><strong>￥ 22.20</strong> <span>7.4折</span></p></dd>
            </dl>
        </div>
        <div class="clear10"></div>
    </div>
    <div id="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif" alt="版权标志"/>京ICP证041189号出版物经营许可证
        新出发京批字第直0673号
    </div>
</div>
</body>
</html>
